<template>
  <el-card class="" shadow="never">
    <div slot="header">
      <span class="has-text-weight-bold">🧐 随便看看</span>
    </div>
    <div>
      <p v-for="(item,index) in recommend" :key="index" :title="item.title" class="block ellipsis is-ellipsis-1">
        <!-- <router-link :to="{name:'post-detail',params:{id:item.id }}"> -->
          <!-- <div > -->
            <span  @click="gotoTag(item.id)" style="cursor:pointer">
          <span v-if="index<9" class="tag" >
            0{{ parseInt(index) + 1 }}
          </span>
          <span v-else class="tag" >
            {{ parseInt(index) + 1 }}
          </span>
         <span style="color: rgb(21, 69, 202);">  {{ item.title }}</span>
        <!-- </router-link> -->
           <!-- </div> -->
           </span>
      </p>
    </div>
  </el-card>
</template>

<script>
import { getRecommendTopics } from '@/api/post'

export default {
  name: 'Recommend',
  props: {
    topicId: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      recommend: []
      // topicId: this.$route.params.topicId
      // tipid: ''
    }
  },
  created () {
    this.fetchRecommendTopics()
    // this.initData()
    // this.fetchRecommendTopics2()
  },
  methods: {
    fetchRecommendTopics () {
      getRecommendTopics(this.topicId).then(value => {
        const { data } = value
        this.recommend = data
      })
    },
    gotoTag (id) {
      this.$router.push({
        name: 'post-detail',
        params: {
          id: id
        }
      })
      this.$emit('func', id)
      this.fetchRecommendTopics(this.id)
    }
  }

}
</script>

<style scoped>

</style>
